<template>
  <div class="container">
    <Breadcrumb :items="['系统管理', '角色管理']"/>
    <el-card class="general-card" title="角色管理">
      <el-table
          row-key="roleId"
          :loading="loading"
          :data="renderData"
          stripe
          :size="size"
          table-layout="auto"
      >
        <el-table-column prop="roleId" label="角色编号"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="roleKey" label="角色标识"></el-table-column>
        <el-table-column prop="roleSort" label="排序"></el-table-column>
        <el-table-column prop="roleDesc" label="说明"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button v-permission="['admin']" type="text" size="small" @click="updateItem(row.roleId)">
              <template #icon>
                <el-icon>
                  <Edit/>
                </el-icon>
              </template>
              编辑
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>

    <!--  表单  -->
    <el-dialog ref="modalRef"
               v-model="formModelSetting.visible"
               :loading="formModelSetting.onLoading"
               :title="formModelSetting.title"
               @close="modelCancelBut">
      <el-form ref="formRef" :model="formData" label-width="auto" label-position="right">
        <el-form-item prop="roleName" label="角色名称">
          <el-input v-model="formData.roleName" disabled show-word-limit/>
        </el-form-item>
        <el-form-item prop="roleDesc" label="描述">
          <el-input v-model="formData.roleDesc" type="textarea" placeholder="请输入角色描述" max-length="200"
                    show-word-limit
                    auto-size/>
        </el-form-item>
      </el-form>

      <template #footer>
        <div>
          <el-button @click="modelCancelBut">取消</el-button>
          <el-button type="primary" @click="modelOkBut">
            {{ formModelSetting.okText }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {computed, reactive, ref} from 'vue';
import useLoading from '@/hooks/loading';
import {ElMessage} from 'element-plus';
import {Pagination} from '@/types/global';
import {edit, EditRoleParams, getRoleById, roleList, RoleParams} from '@/api/system/role';

type SizeProps = 'mini' | 'small' | 'medium' | 'large';

const size = ref<SizeProps>('medium');
const {loading, setLoading} = useLoading(true);

// 对话框是否展示
const formModelSetting = reactive({
  visible: false,
  onLoading: false,
  title: "修改角色",
  okText: "修改",
  cancelText: "",
});

// 表格列
const columns = computed<any[]>(() => [
  {
    title: '角色编号',
    dataIndex: 'roleId',
    align: 'center',
  },
  {
    title: '角色名称',
    dataIndex: 'roleName',
    align: 'center',
  },
  {
    title: '权限标识',
    dataIndex: 'roleKey',
    align: 'center',
  },
  {
    title: '排序',
    dataIndex: 'roleSort',
    align: 'center',
  },
  {
    title: '说明',
    dataIndex: 'roleDesc',
    align: 'center',
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '操作',
    dataIndex: 'operations',
    slotName: 'operations',
    align: 'center',
  },
]);
const renderData = ref<RoleParams[]>([]);

// 表格数据模型
const tableFormModel = () => {
  return {
    roleId: '',
    roleName: '',
    roleKey: '',
    roleSort: '',
    roleDesc: '',
  };
};
const formModel = ref(tableFormModel());

// 分页
const basePagination: Pagination = {
  pageNumber: 1,
  pageSize: 10,
};
const pagination = reactive({
  ...basePagination,
});
const pageChange = async (pageNumber: number) => {
  pagination.pageNumber = pageNumber;
  await getRoleList({
    ...pagination,
    ...formModel.value,
  } as unknown as RoleParams);
}
const pageSizeChange = async (pageSize: number) => {
  pagination.pageSize = pageSize;
  await getRoleList({
    ...pagination,
    ...formModel.value,
  } as unknown as RoleParams);
}

// 查询角色列表
const getRoleList = async (
    params: RoleParams = {
      roleId: 0,
      roleName: "",
      roleKey: "",
      roleSort: "",
      roleDesc: ""
    }
) => {
  setLoading(true);
  try {
    const {data} = await roleList(params);
    renderData.value = data.rows;
    pagination.total = data.total;
  } catch (err) {
    console.log(err);
  } finally {
    setLoading(false);
  }
};
getRoleList();

// 表单模型
const formData = reactive({
  roleId: 0,
  roleName: '',
  roleDesc: '',
});
// 重置表单模型
const resetFormData = () => {
  formData.roleId = 0;
  formData.roleName = '';
  formData.roleDesc = '';
}
const modalRef = ref();
const formRef = ref();

// 编辑按钮
const updateItem = async (roleId: number) => {
  // 查询
  const {code, msg, data}: any = await getRoleById(roleId);
  if (code === 200 && data) {
    // 赋值
    formData.roleId = data.roleId;
    formData.roleName = data.roleName;
    formData.roleDesc = data.roleDesc;
    // 打开弹窗
    formModelSetting.visible = true;
  } else {
    ElMessage.warning({
      message: msg,
      duration: 2 * 1000,
    });
  }
};

// 取消按钮
const modelCancelBut = () => {
  // 关闭弹窗
  formModelSetting.visible = false;
  formModelSetting.onLoading = false;
  // 重置表单
  resetFormData();
};

// 表单确定按钮
const modelOkBut = async () => {
  formData.roleName = '';
  const params: EditRoleParams = formData;
  // 调用修改接口
  const {code}: any = await edit(params);
  if (code === 200) {
    ElMessage.success({
      message: '修改成功',
      duration: 2 * 1000,
    });
    // 弹窗关闭
    formModelSetting.visible = false;
    formModelSetting.onLoading = false;
    await getRoleList();
  } else {
    ElMessage.error({
      message: '修改失败',
      duration: 2 * 1000,
    });
    // 弹窗不关闭
    formModelSetting.visible = true;
    formModelSetting.onLoading = false;
  }
}

</script>

<style lang="less" scoped>
</style>
